<template>
  <!-- 报告单元 -->
  <div id="selfMachineType">
    <Breadcrumb content="自助机" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="基础字典">
          <Splitpanes class="area">
            <Pane size="65">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="machineTypeForm.searchValue" type="search" clearable class="vxeInputSearch"
                    placeholder="关键字查询" @keyup="keyupEnter" @clear="getMachineTypeList"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading"
                    @click="getMachineTypeList"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除"
                    @click="handleDelete"></vxe-button>
                  <!-- <vxe-button type="text" class="button-blue" icon="vxe-icon-sort" content="数据同步" :loading="showLoading1" @click="pullPloyee"></vxe-button> -->
                </template>
              </vxe-toolbar>

              <div class="leftTable">
                <vxe-table ref="machineTypeTable" border="inner" align="left" class="mytable-scrollbar"
                  :loading="showLoading" height="auto" :data="machineList"
                  :expand-config="{ expandAll: true, reserve: true }" @current-change="userRowClick"
                  :row-config="{ isCurrent: true, isHover: true }" :keyboard-config="{
                    isArrow: true,
                    isTab: true,
                    isEdit: false
                  }" :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }" resizable show-overflow
                  keep-source>
                  <vxe-column type="checkbox" width="30"></vxe-column>
                  <vxe-column type="seq" title="#" width="30"></vxe-column>
                  <vxe-column field="titleCode" title="类型编号" width="90"></vxe-column>
                  <vxe-column field="titleName" title="类型名称"></vxe-column>
                  <vxe-column field="screenW" title="屏幕宽度"></vxe-column>
                  <vxe-column field="screenH" title="屏幕高度"></vxe-column>
                  <vxe-column field="styleType" title="样式设置"></vxe-column>
                  <!-- <vxe-column field="isEnabled" title="是否启用" ></vxe-column> -->
                  <vxe-column field="isEnabled" title="是否启用" width="80" align="center" checked-value="0"
                    unchecked-value="1">
                    <template #default="{ row }">
                      <el-tag :type="getIsStaticTagType(row)">
                        {{ getIsStaticStatusDesc(row) }}
                      </el-tag>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <Pane size="35">
              <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                  <!-- 右侧基本信息 -->
                  <el-form ref="machineTypeFormRef" :model="machineTypeForm" label-width="110px"
                    class="form-input-m baseForm" v-loading="showLoading" inline-message>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="类型编码" prop="titleCode">
                          <el-input v-model="machineTypeForm.titleCode" placeholder="类型编码" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="类型名称" prop="titleName">
                          <el-input v-model="machineTypeForm.titleName" placeholder="类型名称" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="屏幕宽度" prop="screenW">
                          <el-input v-model="machineTypeForm.screenW" placeholder="屏幕宽度" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="屏幕高度" prop="screenH">
                          <el-input v-model="machineTypeForm.screenH" placeholder="屏幕高度" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="样式设置" prop="styleType">
                          <el-select v-model="machineTypeForm.styleType" clearable placeholder="Select"
                            style="width: 180px">
                            <el-option v-for="(item, index) in styleTypeList" :key="index" :value="`${item.value}`"
                              :label="item.label" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="12">
                  <el-form-item label="规格" prop="spec">
                    <el-input v-model="machineTypeForm.spec" placeholder="规格" clearable></el-input>
                  </el-form-item>
                </el-col> -->
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="23">
                        <el-form-item label="是否启用" prop="isEnabled">
                          <el-switch v-model="machineTypeForm.isEnabled" inline-prompt active-text="是" inactive-text="否"
                            active-value="1" inactive-value="0"></el-switch>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item class="form-footer">
                      <template #default>
                        <el-button type="primary" @click="add()">新建</el-button>
                        <el-button type="primary" @click="save()">保存</el-button>
                      </template>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { IsEmpty, pageSizes } from '../../../utils/common'; //导入工具函数
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { AppStore } from '@/stores/store';
import { isEmpty } from 'lodash';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();

const orgList = store.userInfo.orgList;
// 加载状态
let showLoading = ref(false); //左侧表格加载+上方刷新按钮+右侧表单+右侧详情
let saveLoading = ref(false); //保存
let machineTypeTable = ref(null); //table表格
let machineList: any = reactive([]); //table列表数据
let currentUser = reactive({}); //当前自助机

let machineTypeForm = reactive({
  id: '',
  titleCode: '',
  titleName: '',
  screenW: '',
  screenH: '',
  topPixels: '',
  printSer: '',
  bgImagePath: '',
  isEnabled: '1',
  searchValue: '',
  styleType: ''
});

let sltPurpose: any = ref({});

let rptGroupFormRule: any = {
  rptGroupName: [
    {
      required: true,
      message: '请输入报告单元名称',
      trigger: 'blur'
    },
    {
      min: 1,
      max: 256,
      message: '长度为1到256个字符',
      trigger: 'blur'
    },
    {
      message: '报告单元名只能为数字或英文字母',
      validator: proxy.validateUserName
    }
  ],
  rptGroup: [
    {
      required: true,
      message: '请输入报告单元编码',
      trigger: 'blur'
    }
    // {
    //   validator: validatePhoneTwo,
    //   trigger: 'blur'
    // }
  ]
};


const styleTypeList = ref([
  {
    value: 0,
    label: '竖屏',
  },
  {
    value: 1,
    label: '横屏',
  }
])


// 页面加载时更新报告单元/字典
onMounted(() => {
  getMachineTypeList(); //加载报告单元列表
});

function getIsStaticStatusDesc(row) {
  if (row.isEnabled == 1) {
    return '是';
  } else if (row.isEnabled == 0) {
    return '否';
  }
}
function getIsStaticTagType(row) {
  if (row.isEnabled == 1) {
    return 'success';
  } else if (row.isEnabled == 0) {
    return 'danger';
  }
}

//查询
function getMachineTypeList() {
  showLoading.value = true;
  machineList.length = 0;
  const url = '/self/machine/type/findMachineTypeList';
  let obj = {
    keyWords: machineTypeForm.searchValue
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      machineList.push(...res.data);
      if (machineList.length > 0) {
        const kn = machineList.find((k) => k.id == sltPurpose.value.id);
        if (isEmpty(kn)) {
          userRowClick({ row: machineList[0] });
        } else {
          userRowClick({ row: kn });
        }
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
  //showLoading.value = true;
}

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getMachineTypeList();
  }
}

// 重置
function resetForm(row: any) {
  if (isEmpty(row)) {
    clearForm();
    return;
  }
  machineTypeForm.id = '';
  machineTypeForm.titleCode = '';
  machineTypeForm.titleName = '';
  machineTypeForm.screenW = '';
  machineTypeForm.screenH = '';
  machineTypeForm.topPixels = '';
  machineTypeForm.printSer = '';
  machineTypeForm.bgImagePath = '';
  machineTypeForm.isEnabled = '1';
  machineTypeForm.searchValue = '';
  machineTypeForm.styleType = '1';
}

// 点击当前行// 行点击事件(需要调试)
function userRowClick({ row }: any) {
  if (isEmpty(row)) {
    currentUser = {} as any;
    return;
  }

  (proxy.$refs.machineTypeTable as any).setCurrentRow(row);
  Object.assign(machineTypeForm, row);

}


// 新建报告单元
function add() {
  clearForm();
  (proxy.$refs.machineTypeTable as any).clearCurrentRow();
}

// 保存
function save(formName: any) {
  let url = '/self/machine/type/savaOrUpdateMachineType';
  proxy.$http
    .post(url, machineTypeForm)
    .then((res: any) => {
      VxeMessage(res.status.msg, VxeNotifyType.success);
      getMachineTypeList();
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 清空右侧表单
function clearForm() {
  machineTypeForm.id = '';
  machineTypeForm.titleCode = '';
  machineTypeForm.titleName = '';
  machineTypeForm.screenW = '';
  machineTypeForm.screenH = '';
  machineTypeForm.topPixels = '';
  machineTypeForm.printSer = '';
  machineTypeForm.bgImagePath = '';
  machineTypeForm.isEnabled = '1';
  machineTypeForm.searchValue = '';
  machineTypeForm.styleType = '1';
}

// 删除数据
function handleDelete() {
  const selectRows = (proxy.$refs.machineTypeTable as any).getCheckboxRecords();

  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的数据', VxeNotifyType.warning);
    return;
  }
  const url = '/self/machine/type/deleteMachineType';
  proxy.$http
    .post(url, selectRows)
    .then((res: any) => {
      getMachineTypeList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

</script>

<style lang="scss" scoped>
#selfMachineType {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    :deep(.el-tabs) {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 39px);
        padding: 0;

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .leftTable {
        height: calc(100% - 39px);

        // :deep(.vxe-table--render-wrapper) {
        //   height: 100%;

        //   .vxe-table--main-wrapper {
        //     height: 100%;

        //     .vxe-table--body-wrapper {
        //       height: calc(100% - 26px) !important;
        //     }
        //   }
        // }

        // :deep(.vxe-table--render-default) {
        //   height: calc(100% - 36px) !important;
        // }
      }

    }
  }
}</style>
